<template>
	<view>
		<top-navbar title="修改订单"></top-navbar>
		<view class="store_order_list">
			<view class="item">
				<view class="order_num">订单编号: {{ orderInfo.order_id }}</view>
				<view class="order_user">
					<text>下单人: {{ orderInfo.nickname || '付款码订单' }}</text>
					<text>{{ orderInfo._add_time }}</text>
				</view>
				<view class="order_info">
					<view class="row" v-for="(v, k) in orderInfo.cartInfo" :key="k">
						<text class="title">{{ v.shopProductInfo.store_name }}</text>
						<view class="numberbox">
							<text class="reduce iconfont icon-shangpinshuliang-jian" @click="reduce(k)"></text>
							<input type="number" v-model="v.cart_num" disabled />
							<text class="plus iconfont icon-shangpinshuliang-jia" @click="plus(k)"></text>
						</view>
					</view>
					<!-- <view class="row">
						<text class="title">多彩塑料花瓶 网红款(赠品)</text>
						<text>X1</text>
					</view>
					<view class="row">
						<text class="title">祝福卡</text>
						<text>X1</text>
					</view> -->
					<view class="row">
						<text class="title">商品金额</text>
						<text>￥{{ orderInfo.pay_price }}</text>
					</view>
					<view class="rows">
						<text>优惠券</text>
						<view class="acea-row row-middle">
							<text style="color: #D9001B;"
								v-if="calcInfo.coupon_price && calcInfo.coupon_price > 0">
								-{{ calcInfo.coupon_price }}
							</text>
							<text style="color: #999; font-size: 24rpx;" v-else>暂无可用优惠券</text>
							<text class="iconfont icon-xiangyou"></text>
						</view>
					</view>
					<view class="total">小计: ￥{{ calcInfo.total_price || orderInfo.total_price }}</view>
				</view>
				<view class="btn_group">
					<text class="btn" @click="edit">确定修改</text>
				</view>
			</view>
		</view>
		<!-- 订单修改 -->
		<wyb-popup ref="popup2" type="center" height="420" width="500" radius="6" :showCloseIcon="true">
		    <view class="popup-content">
		        <view class="title" style="margin-top: 20rpx;">订单修改完成</view>
				<view class="desc" style="color: #D9001B; font-size: 32rpx;">{{ price > 0 ? '退款'+price+'元' : tips }}</view>
				<view class="tips" v-if="price > 0">平台承诺退款将在72小时内处理，请留意退款进度</view>
				<view class="pop_btn" @click="closePop">确定</view>
		    </view>
		</wyb-popup>
	</view>
</template>

<script>
	import { 
		shopOrderDetail,
		calcOrderPrice, 
		matchCoupon,
		shopOrderEdit
	} from '@/api/order.js'
	export default {
		data() {
			return {
				orderInfo: {},
				isEdit: true,
				calcInfo: {},
				tips: '无需退款',
				price: 0
			};
		},
		onLoad(option) {
			
			this.getDetail(option.id)
		},
		methods: {
			// 获取订单详情
			getDetail(id) {
				shopOrderDetail({ uni: id }).then(res => {
					// console.log(res)
					this.orderInfo = res.data
					this.calcMoney()
				})
			},
			reduce (index) {
				let num = this.orderInfo.cartInfo[index].cart_num
				if (num == 0) return
				this.orderInfo.cartInfo[index].cart_num -= 1
				this.calcMoney()
				this.matchOrderCoupons()
			},
			plus (index) {
				// let num = this.orderInfo.cartInfo[index].cart_num
				// num += 1
				// this.orderInfo.cartInfo[index].cart_num += 1
				// this.calcMoney()
				// this.matchOrderCoupons()
			},
			// 计算订单金额
			calcMoney() {
				calcOrderPrice({
					data: this.orderInfo
				}).then(res => {
					// console.log(res)
					this.calcInfo = res.data.result
					this.orderInfo.pay_price = res.data.result.pay_price
				})
			},
			// 匹配订单可用优惠券
			matchOrderCoupons(){
				matchCoupon({
					data: this.orderInfo
				}).then(res => {
					console.log(res)
				})
			},
			// 提交编辑
			edit() {
				shopOrderEdit({
					data: this.orderInfo,
					is_save: 2
				}).then(res => {
					console.log(res)
					if(res.status == 200) {
						if(res.msg) this.price = Number(res.msg)
						this.$refs.popup2.show()
					} else {
						this.$util.Tips({
							title: res.msg
						})
					}
				})
			},
			closePop() {
				this.$refs.popup2.close()
				uni.navigateTo({
					url: '../shop_order_success/shop_order_success?orderId=' + this.orderInfo.order_id
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}
	.store_order_list {
		width: 100%;
		padding: 35rpx 30rpx 0;
		.item {
			width: 100%;

			&:not(:last-child) {
				margin-bottom: 45rpx;
			}

			.order_num,
			.order_user {
				margin-bottom: 16rpx;
			}

			.order_user {
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			.order_info {
				width: 100%;
				background-color: #fff;
				border: 1px solid #95c51b;
				padding: 30rpx;
				border-radius: 10rpx;
				background-color: #f7f7f7;
				.row,
				.rows {
					display: flex;
					// align-items: center;
					justify-content: space-between;
					margin-bottom: 30rpx;

					.title {
						width: 450rpx;
					}

					.numberbox {
						display: flex;
						// align-items: center;
						justify-content: flex-end;
						width: 180rpx;

						text {
							display: flex;
							align-items: center;
							justify-content: center;
							width: 40rpx;
							height: 40rpx;
							font-size: 24rpx;
							border-radius: 50%;
							color: #676868;
						}

						input {
							display: block;
							width: 70rpx;
							height: 40rpx;
							font-size: 30rpx;
							text-align: center;
							background-color: #eee;
							margin: 0 10rpx;
							border-radius: 10rpx;
						}
					}
				}

				.rows {
					align-items: center;
					.icon-xiangyou {
						font-size: 28rpx;
					}
				}
				.total {
					display: flex;
					align-items: center;
					justify-content: flex-end;
				}
			}
			.btn_group {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				margin-top: 60rpx;
			
				.btn {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 340rpx;
					height: 80rpx;
					margin: 0 auto;
					background-color: #95c51b;
					border: 0;
					font-size: 30rpx;
					border-radius: 40rpx;
					color: #fff;
				}
			}
		}
	}
	.popup-content {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 50rpx;
		height: 100%;
		.title {
			width: 100%;
			text-align: center;
			font-size: 34rpx;
			margin-bottom: 20rpx;
			margin-top: 50rpx;
			font-weight: 700;
		}
		.desc {
			width: 100%;
			text-align: center;
			color: #999;
		}
		.tips {
			width: 100%;
			text-align: center;
			color: #999;
			margin-top: 10rpx;
		}
		.pop_btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 65rpx;
			background-color: #95c51b;
			font-size: 32rpx;
			border-radius: 40rpx;
			margin-top: 50rpx;
			color: #fff;
		}
	}
</style>
